<template>
  <div>
    <button @click="handleClick">{{ store.count }}</button>
    <button @click="resetClick">重置pinia的数据</button>
    <button @click="testAxios">发送请求</button>
    <div>{{ count }}</div>
    <h3>修改pinia中的值</h3>
    <div v-if="store.username == 'admin'">修改前：{{ store.username }}</div>
    <div v-else>修改后：{{ store.username }}</div>
    <div>获取getters值：{{ getCount }}</div>
  </div>
</template>

<script setup lang="ts">
import { user } from '../../store'
// 1.引入响应式方法，确保结构从pinia仓库结构出来的数据是详情的
import { storeToRefs } from 'pinia'
const store = user()

// 1.在结构时进行使用
const { count } = storeToRefs(store)
// 2.更改pinia中的值
const handleClick = () => {
  // 2.1直接更改
  // store.count++
  // store.username = '张三'
  // 2.2通过$patch函数修改
  // store.$patch({
  //   username: '王五'
  // })
  // 2.3通过actions中设置的方法名称传参来改变
  store.SET_DATA('老六')
}
const resetClick = () => {
  store.$reset()
}
// 3.使用getters
let getCount = store.getCount

// 4.使用actions方法解决同步和异步(发送请求)
const testAxios = async () => {
  const res = await store.getAxiosData({ a: 1, b: 2 })
  console.log(res, 'res123132132');

}

</script>

<style lang="scss" scoped></style>